﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UI.Models.ProductDetailModels>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <%= UI.Helper.Utils.IncludeJS(this.Html, "~/Scripts/jquery.blockUI.js")%>
    <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td >
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="12" align="left">
                            <img src="<%= Url.Content("~/Images/bg-title-blue-left.png")%>" width="12" height="46" />
                        </td>
                        <td class="Bgtitle">
                            <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td class="Title-white">
                                        <%: Model.CategoryName%>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td width="17" align="left">
                            <img src="<%= Url.Content("~/Images/bg-title-blue-right.png")%>" width="17" height="46" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="55" style="padding-top: 10px;">
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="top" class="Table">
                            <table width="100%" cellspacing="5" cellpadding="5">
                                <tr>
                                    <td valign="top">
                                        <div id="titledetials">
                                            <img src="<%= Url.Content("~/Images/arrow-organe.gif")%>" width="4" height="7" />
                                            <%: Model.Name.ToUpper() %></div>
                                        <div id="titledetials">
                                            <img src="<%= Url.Content("~/Images/arrow-organe.gif")%>" width="4" height="7" />
                                            <span style="cursor:pointer;" onclick="ShowMap('mapContainer', 'map', '<%: Model.Address %>')">
                                                Xem bản đồ vị trí của Dự Án</span>
                                            <!-- map detail -->
                                            <div id="mapContainer" class="mapContainer" style="">
                                                <div style="width:500px;height:3px"></div>
                                                <div id="map" class="mapContent"></div>

                                                <div style="width:500px;height:10px"></div>
                                                <div style="width:230px;height:3px;float:left"></div>
                                                <div id="btnClose" class="button" style="height:22px" onclick="UnBlock();">
                                                    <div id="innerButton" class="innerBtnBuy" style="height:20px;font-size:13px">
                                                        <div style="height:2px;width:86px"></div>
                                                        &nbsp;&nbsp;đóng bản đồ&nbsp;&nbsp;
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end map detail -->
                                        </div>
                                        <div id="details">
                                            <%= Url.Content(Model.Description)%>
                                        </div>
                                        <!--Begin Gallery-->
                                        <div style="padding-top: 10px; float: left">
                                            <div id="bgImg">
                                            </div>
                                            <div style="float: left; width: 7px; height: 10px">
                                                &nbsp;</div>
                                            <div id="bgSmallImg">
                                                <div id="contentImg" style="position: relative; top: 0px">
                                                    <% foreach (var tmp in Model.liImages)
                                                       { %>
                                                    <div style="width: 98px; height: 1px; float: left">
                                                    </div>
                                                    <img id="img_0" src="<%= Url.Content(tmp.Url)%>" />
                                                    <% } %>
                                                </div>
                                                <div style="width: 98px; height: 1px">
                                                </div>
                                            </div>
                                            <div style="width: 98px; height: 1px">
                                            </div>
                                            <div style="width: 130px; height: 3px; float: left">
                                            </div>
                                            <div style="float: left; width: 7px; height: 20px; float: left">
                                                &nbsp;</div>
                                        </div>
                                        <!--End Gallery-->
                                        <script type="text/javascript">
                                            $(document).ready(function () {

                                                //            var arr_Img_url = new Array("Images/food-drink-sample.jpg", "Images/food-drink-sample_2.jpg", "Images/food-drink-sample_3.jpg");
                                                //            var intervalTime = 1000;

                                                //            var curImg = 0;
                                                //            var totalImg = arr_Img_url.length;
                                                //            
                                                //            function showImg() {
                                                //                if (curImg < totalImg) {
                                                //                    $("#mainImg").attr("src", arr_Img_url[curImg]);
                                                //                    curImg++;
                                                //                }
                                                //                else {
                                                //                    curImg = 0;
                                                //                }

                                                //            }

                                                //            var atuShow = window.setInterval(showImg, intervalTime);

                                                /*--------------*/
                                                /*----Img Show--*/
                                                /*--------------*/
                                                var topVal = 0;
                                                var arr_imgs = $("#bgSmallImg img");

                                                var totalImg = arr_imgs.length;
                                                var img_per_lice = 5;
                                                var curLice = 0;
                                                var curImg = 0;
                                                var intervalTime = 4000;

                                                var plusDiv = img_per_lice - (arr_imgs.length % img_per_lice) < img_per_lice
                        ? img_per_lice - (arr_imgs.length % img_per_lice) : 0;
                                                var lengthDiv = plusDiv * 70 + plusDiv;
                                                var htmDiv = "<div style='float:left;width:98px;heigth:" + lengthDiv + "px'>&nbsp;<p/>&nbsp;<p/>&nbsp;<p/>&nbsp;<p/></div>";

                                                $("#contentImg").append(htmDiv);

                                                function displayMainImg() {

                                                    if (curImg < totalImg - 1) {
                                                        $(arr_imgs[curImg]).attr("style", "opacity:1.0");
                                                        curImg += 1;
                                                    }
                                                    else {
                                                        $(arr_imgs[totalImg - 1]).attr("style", "opacity:1.0");
                                                        curImg = 0;
                                                        next();
                                                        return false;
                                                    }

                                                    if ((curImg) % img_per_lice == 0 && curImg != 0) {
                                                        next();
                                                    }
                                                    else if (curImg >= totalImg) {
                                                        next();
                                                    }
                                                    else {
                                                        $("#bgImg").css("background", "url('" + $(arr_imgs[curImg]).attr('src') + "') no-repeat left top");
                                                        $(arr_imgs[curImg]).attr("style", "opacity:0.6;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'")
                                                    }

                                                }

                                                //set interval time for displayMainImg
                                                var autoChangeMainImg = setInterval(displayMainImg, intervalTime);

                                                function next() {
                                                    $(arr_imgs[curImg - 1]).attr("style", "opacity:1.0");
                                                    $(arr_imgs[curImg]).attr("style", "opacity:1.0");
                                                    if (totalImg % img_per_lice == 0) {
                                                        if (curLice < (totalImg / img_per_lice) - 1) {
                                                            curLice += 1;
                                                            topVal += 355;
                                                            curImg = curLice * img_per_lice;
                                                        }
                                                        else {
                                                            curLice = 0;
                                                            topVal = 0;
                                                            curImg = 0;
                                                        }
                                                    }
                                                    else {
                                                        if (curLice < (totalImg / img_per_lice) - 1) {
                                                            curLice += 1;
                                                            topVal += 355;
                                                            curImg = curLice * img_per_lice;
                                                        }
                                                        else {
                                                            curLice = 0;
                                                            topVal = 0;
                                                            curImg = 0;
                                                        }
                                                    }

                                                    $("#bgSmallImg").animate({ scrollTop: topVal }, 700);
                                                    $("#bgImg").css("background", "url('" + $(arr_imgs[curImg]).attr('src') + "') no-repeat left top");
                                                    $(arr_imgs[curImg]).attr("style", "opacity:0.6;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'")

                                                }

                                                function prev() {
                                                    $(arr_imgs[curImg]).attr("style", "opacity:1.0");
                                                    clearInterval(autoChangeMainImg);
                                                    if (curLice > 0) {
                                                        curLice -= 1;
                                                        topVal -= 355;
                                                    }
                                                    else {
                                                        curLice = 0;
                                                        topVal = 0;
                                                    }
                                                    curImg = curLice * img_per_lice;

                                                    $("#bgSmallImg").animate({ scrollTop: topVal }, 700);
                                                    $("#bgImg").css("background", "url('" + $(arr_imgs[curImg]).attr('src') + "') no-repeat left top");
                                                    $(arr_imgs[curImg]).attr("style", "opacity:0.6;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'")
                                                    autoChangeMainImg = setInterval(displayMainImg, intervalTime);
                                                }

                                                $("#prevImg").bind("click", function () {
                                                    prev();
                                                });

                                                $("#nextImg").bind("click", function () {
                                                    clearInterval(autoChangeMainImg);
                                                    next();
                                                    autoChangeMainImg = setInterval(displayMainImg, intervalTime);
                                                });

                                                $("#bgSmallImg img").bind("click", function () {
                                                    clearInterval(autoChangeMainImg);
                                                    var imgId = $(this);
                                                    $("#bgImg").css("background", "url('" + imgId.attr('src') + "') no-repeat left top");
                                                    $(arr_imgs[curImg]).attr("style", "opacity:1.0");
                                                    var id = new String(imgId.attr("Id"));
                                                    curImg = parseInt(id.substring(4));
                                                    $(arr_imgs[curImg]).attr("style", "opacity:0.6;-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'");
                                                    autoChangeMainImg = setInterval(displayMainImg, intervalTime);
                                                });

                                            });
                                        </script>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="padding-top: 10px;">
                &nbsp;
            </td>
        </tr>
    </table>
    
    <script>
        function ShowMap(mapContainerId, mapId, address) {
            //show container map before assign map
            $('#' + mapContainerId).show();

            DrawMap(mapId, address, true);
            //hide container map after assign map
            $('#' + mapContainerId).hide();

            $.blockUI({ message: $('#' + mapContainerId) });
        }

        function UnBlock() {
            $.unblockUI();
            return false;
        }
    </script>
</asp:Content>